<template lang="pug">
.login-main
  el-form(:model="state.form" :rules="state.rules" ref="valiForm" class="form-wrap" @submit.native.prevent)
    .form-title
    el-form-item(label="" prop="name")
      el-input(v-model="state.form.name" placeholder="用户名")
    el-form-item(label="" prop="password")
      el-input(v-model="state.form.password" placeholder="密码")
    .btn-wrap
      el-button(@click.native.prevent="formSubmit('form')" type="primary" :loading="state.loading") 确定
  </template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { downLoadFile } from '@/api/act'
const state = reactive({
  loading: false,
  form: {
    name: 'admin',
    password: '111111'
  },
  rules: {
    name: [{ required: true, message: '用户名', trigger: 'blur' }],
    password: [{ required: true, message: '密码', trigger: 'blur' }]
  }
})
const valiForm = ref()

// 表单提交
function formSubmit (form) {
  valiForm.value.validate(async (valid) => {
    if (valid) {
      try {
        state.loading = true
        await proxy.$store.dispatch('loginFun', state.form)
        state.loading = false
        proxy.$router.push({ path: '/' })
      } catch (err) {
        state.loading = false
      }
    } else {
      return false
    }
  })
}

function downLoad (zoom) {
  downLoadFile(zoom).then(res => {
    proxy.$message.success('开始下载')
  })
}

</script>

<style lang="scss">
  .login-main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background: url('../../assets/images/login_bg.jpg') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .form-wrap {
      width: 100%;
      max-width: 360px;
      background-color: #fff;
      border-radius: 5px;
      padding: 20px 20px 10px;
      margin: -10% 20px 0;
      box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
      .form-title {
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        padding-bottom: 30px;
      }
      .btn-wrap {
        padding-bottom: 20px;
        .el-button {
          display: block;
          width: 100%;
          line-height: 40px;
          height: 40px;
          padding: 0;
        }
      }
    }
  }
</style>
